<template>
  <div class="updateTable">
    <div class="cardTitle flexBetween padding5-10 fontSize18 fontWeight">
      <div class="titleName">预案更新提醒</div>
      <a @click="goRouter" style="color: #fff; text-decoration: none;">更多<i class="el-icon-d-arrow-right" color="#fff"></i></a>
    </div>
    <div class="updateCenter">
      <el-table :header-cell-style="{ background: 'rgba(2,167,240,0.25)', color: '#fff',borderColor:'1px dashed rgba(255,255,255,0.2)','text-align':'center'}" :cell-style="{ color: '#fff',borderColor:'1px dashed rgba(255,255,255,0.2)'}" :style="{borderColor:'1px dashed rgba(255,255,255,0.2)','font-size':'16px'}" :data="tableData" height="100%">
        <el-table-column label="序号" type="index" align="center" width="80px">
        </el-table-column>
        <el-table-column prop="releaseUnitName" label="发布单位" align="center">
        </el-table-column>
        <el-table-column prop="preplanDepartmentId" label="编制部门" align="center">
        </el-table-column>
        <el-table-column prop="serialName" label="预案名称" align="left " min-width="160px">
        </el-table-column>
        <el-table-column prop="releaseTime" label="最新更新时间" align="center" width="150px">
        </el-table-column>
        <el-table-column prop="remindStr" label="更新提醒" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.remindStr=='超期提醒'" style="color:#FF0606">{{ scope.row.remindStr }}</span>
            <span v-else-if="scope.row.remindStr=='更新提醒'" style="color:#F9E50E">{{ scope.row.remindStr }}</span>
            <span v-else>{{ scope.row.remindStr }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>
<script>
import { getUpdateListApi } from "@/api/EmengercyPlan/homepagecontent";
export default {
  name: "UpdateTable",
  components: {

  },
  data() {
    return {
      tableData: [{
        releaseUnitId: "武汉",
        preplanDepartmentId: "安监部",
        serialName: "交通事故应急预案",
        releaseTime: "2019年10月12日",
        remindStr: "超期提醒"
      }, {
        releaseUnitId: "随州",
        preplanDepartmentId: "安监部",
        serialName: "人身伤亡事件应急预案",
        releaseTime: "2020年05月13日",
        remindStr: "更新提醒"
      }, {
        releaseUnitId: "咸宁",
        preplanDepartmentId: "安监部",
        serialName: "地质灾害应急预案",
        releaseTime: "2020年05月11日",
        remindStr: "更新提醒"
      }, {
        releaseUnitId: "黄石",
        preplanDepartmentId: "安监部",
        serialName: "地震灾害应急预案",
        releaseTime: "2020年05月15日",
        remindStr: "更新提醒"
      }, {
        releaseUnitId: "孝感",
        preplanDepartmentId: "安监部",
        serialName: "抗旱应急预案",
        releaseTime: "2020年05月19日",
        remindStr: "正常"
      }]
    };
  },
  mounted() {
    this.getUpdateList();
  },
  methods: {
    // 列表
    getUpdateList() {
      getUpdateListApi({}).then(res => {
        console.log("预案更新提醒列表", res.data);
        this.tableData = res.data;
      });
    },
    // 跳转预案管理列表
    goRouter(name) {
      this.$router.push({
        name: "PlanManagement"
      });
    }
  }
};
</script>
<style scoped lang="less">
.updateTable {
  height: 100%;
  border: 1px solid #0649d7;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .cardTitle {
    background-color: #2054e0;
  }
  .updateCenter {
    padding: 10px;

    //去除表格白色横线
    .el-table--border::after,
    .el-table--group::after,
    .el-table::before {
      height: 0px;
      // background-color: transparent;
      //display: none;
    }
    // 最外层透明
    /deep/ .el-table,
    /deep/ .el-table__expanded-cell {
      background-color: transparent;
    }
    //表格内背景颜色
    /deep/ .el-table th,
    /deep/ .el-table tr,
    /deep/ .el-table td {
      background-color: transparent;
    }
    :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
      background-color: transparent;
    }
    :deep(.el-table th.el-table__cell.is-leaf) {
      border-bottom: 1px solid transparent;
      padding: 6px;
    }
    :deep(.el-table td.el-table__cell) {
      border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
    }
  }
}
</style>
